<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        .box1{
            border: 10px red solid;
        }

        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfa;
        /*
            在文档流中的元素，可以将其他元素的高度撑开！
                当元素浮动，它会脱离文档流，脱离文档流后，
                    无法撑开父元素的高度，导致父元素高度塌陷
                父元素高度塌陷，其后的元素会自动上移，导致布局变得混乱

            高度塌陷是我们使用浮动布局时必须要解决的问题！

            如何解决该问题？
                1. 可以直接将父元素的高度写死
                    - 这样一来父元素高度写死，无法根据子元素高度的变化而变化
            解决方案：
        */
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>

<div class="box1">
    <div class="box2"></div>
</div>

<div class="box3"></div>

</body>
</html>